<template>

	<view class="warp">
		<view class="u-demo-block">
			<view class="album">
				<view class="album__content">
					<uni-section title="必备知识" type="line" bold>
						<navigator style="padding:10px" open-type="redirect" v-for="(item,index) in hotExamData" :url="'/pages/exam/topicdetail?id='+item.id" hover-class="navigator-hover">
						<u--text  :text="item.title"></u--text>
						</navigator>
					</uni-section>
				</view>
			</view>
		</view>
		<u-line color="#2979ff" :dashed="true"></u-line>
		<uni-section title="我的练习" type="line">
			<uni-grid :show-border="false" :square="false" @change="changeOne">
				<uni-grid-item v-for="(item ,index) in list.data1" :index="index" :key="index">
					<view class="grid-item-box">
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

		<u-line color="#2979ff" :dashed="true"></u-line>

		<uni-section title="精选题库" type="line">
			<uni-grid :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in list.data2" :index="index" :key="index">
					<view class="grid-item-box">
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<u-line color="#2979ff" :dashed="true"></u-line>
		<uni-section title="在线助手" type="line">
			<uni-grid :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in list.data3" :index="index" :key="index">
					<view class="grid-item-box">
								<text class="text">{{item.text}}</text>
								<view v-if="item.badge" class="grid-dot">
									<uni-badge :text="item.badge" :type="item.type" />
								</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	
	</view>

</template>
<script>
	import api from '@/api/index.js'
	export default {
		components: {},
		data() {
			return {
				albumWidth: 0,
				selectedFooterIndex: 0,
				urls1: [{
					src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}],
				hotExamData: [],
				list: {
					data1:[{
						text: '面试刷题',
						badge: '10+',
						type: "primary"
					},
					{
						text: '错题分析',
						badge: '500+',
						type: "success"
					},
					{
						text: '好友助力',
						badge: '500+',
						type: "success"
					}
				],
				data2:[{
						text: '.net',
						badge: '1000+',
						type: "primary"
					},
					{
						text: 'UI',
						badge: '500+',
						type: "success"
					},
					{
						text: 'DB',
						badge: '500+',
						type: "success"
					},
					{
						text: '业务能力',
						badge: '500+',
						type: "success"
					},
					{
						text: '工具技术',
						badge: '500+',
						type: "success"
					}
				],
				data3:[{
						text: '搜面试题',
						badge: '1000+',
						type: "primary"
					},
					{
						text: '岗位分析',
						badge: '500+',
						type: "success"
					},
					{
						text: '模拟面试',
						badge: '500+',
						type: "success"
					}
				]
				}
			}
		},
		onLoad() {
			this.loadHotData()
		},
		methods: {
			change(e) {
				//console.log(e)
				let {
					index,
					key
				} = e.detail
				uni.navigateTo({
					url:'/pages/exam/exam'
				})
			},
			changeOne(e)
			{
				//console.log(e)
				let {
					index
				} = e.detail
				if(index==0)
				uni.navigateTo({
					url:'/pages/exam/examtesting'
				})
			},
			loadHotData()
			{
				api.exam.GetHotTopic().then(res=>{
					this.hotExamData=res
				});
			}
		}
	}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 15px;
		margin-top: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
